React useSyncExternalStore: Välise oleku integratsiooni meisterlik valdamine

Reacti useSyncExternalStore hook, mis tutvustati React 18-s, pakub võimsat ja tõhusat viisi väliste andmeallikate ja olekuhaldus teekide integreerimiseks teie Reacti komponentidesse. See hook võimaldab komponentidel tellida muudatusi välistes hoidlates (stores), tagades, et kasutajaliides peegeldab alati uusimaid andmeid, optimeerides samal ajal jõudlust. See juhend annab põhjaliku ülevaate useSyncExternalStore'ist, käsitledes selle põhimõisteid, kasutusmustreid ja parimaid praktikaid.

Miks on vaja useSyncExternalStore'i?

Paljudes Reacti rakendustes puutute kokku olukordadega, kus olekut tuleb hallata väljaspool komponendipuu. See on sageli nii, kui tegelete:

• Kolmandate osapoolte teegid: Integreerimine teekidega, mis haldavad oma olekut (nt andmebaasiühendus, brauseri API või füüsikamootor).
• Jagatud olek komponentide vahel: Olekuhaldus, mida on vaja jagada komponentide vahel, mis ei ole otseselt seotud (nt kasutaja autentimise staatus, rakenduse seaded või globaalne sündmuste siin).
• Välised andmeallikad: Andmete toomine ja kuvamine välistest API-dest või andmebaasidest.

Traditsioonilised olekuhalduslahendused nagu useState ja useReducer sobivad hästi lokaalse komponendi oleku haldamiseks. Siiski ei ole need loodud välise oleku tõhusaks käsitlemiseks. Nende otse kasutamine väliste andmeallikatega võib põhjustada jõudlusprobleeme, ebajärjekindlaid uuendusi ja keerulist koodi.

useSyncExternalStore lahendab need väljakutsed, pakkudes standardiseeritud ja optimeeritud viisi väliste hoidlate muudatuste tellimiseks. See tagab, et komponente renderdatakse uuesti ainult siis, kui asjakohased andmed muutuvad, minimeerides tarbetuid uuendusi ja parandades üldist jõudlust.

useSyncExternalStore'i põhimõisted

useSyncExternalStore võtab kolm argumenti:

1. subscribe: Funktsioon, mis võtab argumendiks tagasikutse (callback) ja tellib välise hoidla. Tagasikutset kutsutakse alati, kui hoidla andmed muutuvad.
2. getSnapshot: Funktsioon, mis tagastab hetktõmmise andmetest välisest hoidlast. See funktsioon peaks tagastama stabiilse väärtuse, mida React saab kasutada, et teha kindlaks, kas andmed on muutunud. See peab olema puhas ja kiire.
3. getServerSnapshot (valikuline): Funktsioon, mis tagastab hoidla algväärtuse serveripoolse renderdamise ajal. See on ülioluline tagamaks, et algne HTML vastab kliendipoolsele renderdamisele. See on kasutusel AINULT serveripoolse renderdamise keskkondades. Kui see kliendipoolses keskkonnas puudub, kasutatakse selle asemel getSnapshot'i. On oluline, et see väärtus ei muutuks kunagi pärast seda, kui see on esialgselt serveri poolel renderdatud.

Siin on iga argumendi jaotus:

1. subscribe

subscribe funktsioon vastutab ühenduse loomise eest Reacti komponendi ja välise hoidla vahel. See saab tagasikutse funktsiooni, mida see peaks kutsuma alati, kui hoidla andmed muutuvad. Seda tagasikutset kasutatakse tavaliselt komponendi uuesti renderdamise käivitamiseks.

Näide:

            const subscribe = (callback) => {
  store.addListener(callback);
  return () => {
    store.removeListener(callback);
  };
};
            

              
                Copy
              
            
          

Selles näites lisab store.addListener tagasikutse hoidla kuulajate nimekirja. Funktsioon tagastab puhastusfunktsiooni, mis eemaldab kuulaja, kui komponent eemaldatakse, vältides mälulekkeid.

2. getSnapshot

getSnapshot funktsioon vastutab hetktõmmise hankimise eest välisest hoidlast. See hetktõmmis peaks olema stabiilne väärtus, mida React saab kasutada, et teha kindlaks, kas andmed on muutunud. React kasutab Object.is, et võrrelda praegust hetktõmmist eelmise hetktõmmisega. Seetõttu peab see olema kiire ja on tungivalt soovitatav, et see tagastaks primitiivse väärtuse (sõne, number, tõeväärtus, null või undefined).

Näide:

            const getSnapshot = () => {
  return store.getData();
};
            

              
                Copy
              
            
          

Selles näites tagastab store.getData praegused andmed hoidlast. React võrdleb seda väärtust eelmise väärtusega, et teha kindlaks, kas komponenti on vaja uuesti renderdada.

3. getServerSnapshot (valikuline)

getServerSnapshot funktsioon on oluline ainult siis, kui kasutatakse serveripoolset renderdamist (SSR). Seda funktsiooni kutsutakse esialgse serveri renderdamise ajal ja selle tulemust kasutatakse hoidla algväärtusena enne hüdreerimise toimumist kliendi poolel. Järjepidevate väärtuste tagastamine on eduka SSR-i jaoks ülioluline.

Näide:

            const getServerSnapshot = () => {
  return store.getInitialDataForServer();
};
            

              
                Copy
              
            
          

Selles näites tagastab `store.getInitialDataForServer` algandmed, mis sobivad serveripoolseks renderdamiseks.

Põhiline kasutusnäide

Vaatame lihtsat näidet, kus meil on väline hoidla, mis haldab loendurit. Me saame kasutada useSyncExternalStore'i, et kuvada loenduri väärtust Reacti komponendis:

            // Väline hoidla
const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// Reacti komponent
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Selles näites loob createStore lihtsa välise hoidla, mis haldab loenduri väärtust. Komponent Counter kasutab useSyncExternalStore'i, et tellida hoidla muudatusi ja kuvada praegust arvu. Kui inkremendi nupule klõpsatakse, uuendab setState funktsioon hoidla väärtust, mis käivitab komponendi uuesti renderdamise.

Integreerimine olekuhaldus teekidega

useSyncExternalStore on eriti kasulik integreerimiseks olekuhaldus teekidega nagu Zustand, Jotai ja Recoil. Need teegid pakuvad oma mehhanisme oleku haldamiseks ja useSyncExternalStore võimaldab teil neid sujuvalt oma Reacti komponentidesse integreerida.

Siin on näide integreerimisest Zustandiga:

            import { useStore } from 'zustand';
import { create } from 'zustand';

// Zustandi hoidla
const useBoundStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

// Reacti komponent
function Counter() {
  const count = useStore(useBoundStore, (state) => state.count);
  const increment = useStore(useBoundStore, (state) => state.increment);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Zustand lihtsustab hoidla loomist. Selle sisemisi subscribe ja getSnapshot implementatsioone kasutatakse kaudselt, kui tellite konkreetse oleku.

Siin on näide integreerimisest Jotaiga:

            import { atom, useAtom } from 'jotai'

// Jotai aatom
const countAtom = atom(0)

// Reacti komponent
function Counter() {
  const [count, setCount] = useAtom(countAtom)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

export default Counter;

            

              
                Copy
              
            
          

Jotai kasutab oleku haldamiseks aatomeid. useAtom tegeleb sisemiselt tellimise ja hetktõmmiste tegemisega.

Jõudluse optimeerimine

useSyncExternalStore pakub mitmeid mehhanisme jõudluse optimeerimiseks:

• Valikulised uuendused: React renderdab komponendi uuesti ainult siis, kui getSnapshot'i tagastatud väärtus muutub. See tagab, et tarbetuid uuesti renderdamisi välditakse.
• Uuenduste pakendamine: React pakendab mitme välise hoidla uuendused üheks uuesti renderdamiseks. See vähendab uuesti renderdamiste arvu ja parandab üldist jõudlust.
• Vananenud sulundite vältimine: useSyncExternalStore tagab, et komponendil on alati juurdepääs uusimatele andmetele välisest hoidlast, isegi asünkroonsete uuenduste korral.

Jõudluse edasiseks optimeerimiseks kaaluge järgmisi parimaid praktikaid:

• Minimeerige getSnapshot'i tagastatavate andmete hulka: Tagastage ainult need andmed, mida komponent tegelikult vajab. See vähendab võrreldavate andmete hulka ja parandab uuendusprotsessi tõhusust.
• Kasutage memoiseerimistehnikaid: Memoiseerige kulukate arvutuste või andmete teisenduste tulemused. See aitab vältida tarbetuid ümberarvutusi ja parandab jõudlust.
• Vältige tarbetuid tellimusi: Tellige väline hoidla ainult siis, kui komponent on tegelikult nähtav. See võib vähendada aktiivsete tellimuste arvu ja parandada üldist jõudlust.
• Tagage, et getSnapshot tagastab uue *stabiilse* objekti ainult siis, kui andmed on muutunud: Vältige uute objektide/massiivide/funktsioonide loomist, kui alusandmed pole tegelikult muutunud. Tagastage võimalusel sama objekt viite kaudu.

Serveripoolne renderdamine (SSR) useSyncExternalStore'iga

Kui kasutate useSyncExternalStore'i serveripoolse renderdamisega (SSR), on ülioluline pakkuda getServerSnapshot funktsiooni. See funktsioon tagab, et serveris renderdatud algne HTML vastab kliendipoolsele renderdamisele, vältides hüdreerimisvigu ja parandades kasutajakogemust.

Siin on näide getServerSnapshot'i kasutamisest:

            const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const getServerSnapshot = () => initialValue; // Oluline SSR-i jaoks

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    getServerSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// Reacti komponent
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot, counterStore.getServerSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Selles näites tagastab getServerSnapshot loenduri algväärtuse. See tagab, et serveris renderdatud algne HTML vastab kliendipoolsele renderdamisele. `getServerSnapshot` peaks tagastama stabiilse ja prognoositava väärtuse. See peaks ka täitma sama loogikat nagu getSnapshot funktsioon serveris. Vältige brauserispetsiifiliste API-de või globaalsete muutujate kasutamist getServerSnapshot'is.

Täpsemad kasutusmustrid

useSyncExternalStore'i saab kasutada mitmesugustes täpsemates stsenaariumides, sealhulgas:

• Integreerimine brauseri API-dega: Muudatuste tellimine brauseri API-des nagu localStorage või navigator.onLine.
• Kohandatud hook'ide loomine: Välise hoidla tellimise loogika kapseldamine kohandatud hook'i.
• Kasutamine koos Context API-ga: useSyncExternalStore'i kombineerimine Reacti Context API-ga, et pakkuda jagatud olekut komponendipuu jaoks.

Vaatame näidet kohandatud hook'i loomisest localStorage'i tellimiseks:

            import { useSyncExternalStore } from 'react';

function useLocalStorage(key, initialValue) {
  const getSnapshot = () => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error("Error getting value from localStorage:", error);
      return initialValue;
    }
  };

  const subscribe = (callback) => {
    window.addEventListener('storage', callback);
    return () => window.removeEventListener('storage', callback);
  };

  const setItem = (value) => {
    try {
      window.localStorage.setItem(key, JSON.stringify(value));
      window.dispatchEvent(new Event('storage')); // Käivita käsitsi 'storage' sündmus samal lehel olevate uuenduste jaoks
    } catch (error) {
      console.error("Error setting value in localStorage:", error);
    }
  };

  const serverSnapshot = () => initialValue;

  const storedValue = useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);

  return [storedValue, setItem];
}

export default useLocalStorage;

            

              
                Copy
              
            
          

Selles näites on useLocalStorage kohandatud hook, mis tellib muudatusi localStorage'is. See kasutab useSyncExternalStore'i tellimuse haldamiseks ja praeguse väärtuse hankimiseks localStorage'ist. Samuti saadab see korrektselt 'storage' sündmuse, et tagada samal lehel tehtud uuenduste kajastumine (kuna `storage` sündmused käivitatakse ainult teistes vahelehtedes). serverSnapshot tagab, et algväärtused on serverikeskkondades korrektselt esitatud.

Parimad praktikad ja levinud lõksud

Siin on mõned parimad praktikad ja levinud lõksud, mida vältida useSyncExternalStore'i kasutamisel:

• Vältige välise hoidla otsest muutmist: Kasutage andmete uuendamiseks alati hoidla API-d. Hoidla otse muutmine võib põhjustada ebajärjekindlaid uuendusi ja ootamatut käitumist.
• Tagage, et getSnapshot on puhas ja kiire: getSnapshot'il ei tohiks olla kõrvalmõjusid ja see peaks kiiresti tagastama stabiilse väärtuse. Kulukad arvutused või andmete teisendused tuleks memoiseerida.
• Pakkuge getServerSnapshot funktsiooni SSR-i kasutamisel: See on ülioluline tagamaks, et serveris renderdatud algne HTML vastab kliendipoolsele renderdamisele.
• Käsitlege vigu sujuvalt: Kasutage try-catch plokke, et käsitleda võimalikke vigu välisele hoidlale juurdepääsul.
• Puhastage tellimused: Tühistage alati välise hoidla tellimus, kui komponent eemaldatakse, et vältida mälulekkeid. subscribe funktsioon peaks tagastama puhastusfunktsiooni, mis eemaldab kuulaja.
• Mõistke jõudluse mõjusid: Kuigi useSyncExternalStore on optimeeritud jõudluse jaoks, on oluline mõista väliste hoidlate tellimise võimalikku mõju. Minimeerige getSnapshot'i tagastatavate andmete hulka ja vältige tarbetuid tellimusi.
• Testige põhjalikult: Veenduge, et integratsioon hoidlaga töötab korrektselt erinevates stsenaariumides, eriti serveripoolse renderdamise ja konkurentses režiimis.

Kokkuvõte

useSyncExternalStore on võimas ja tõhus hook väliste andmeallikate ja olekuhaldus teekide integreerimiseks teie Reacti komponentidesse. Mõistes selle põhimõisteid, kasutusmustreid ja parimaid praktikaid, saate oma Reacti rakendustes tõhusalt hallata jagatud olekut ja optimeerida jõudlust. Olgu tegemist kolmandate osapoolte teekidega integreerimise, jagatud oleku haldamise komponentide vahel või andmete toomisega välistest API-dest, useSyncExternalStore pakub standardiseeritud ja usaldusväärset lahendust. Kasutage seda, et ehitada vastupidavamaid, hooldatavamaid ja jõudlusvõimelisemaid Reacti rakendusi globaalsele publikule.

Lisamaterjalid

• Reacti dokumentatsioon useSyncExternalStore kohta
• React 18 Pull Request, mis tutvustab useSyncExternalStore'i
• Zustandi olekuhaldus teek
• Jotai olekuhaldus teek